<template>
	<view>
		<view v-if="!isLoad" class="gui-flex gui-row gui-nowrap gui-space-between gui-padding" style="padding-bottom: 5px;">
			<view v-for="(item, index) in listItems" :key="index" class="demo-grid demo-bg gui-dark-bg-level-3 gui-border-radius"></view>
		</view>
		<view v-if="isLoad" class="gui-flex gui-row gui-nowrap gui-space-between gui-padding" style="padding-bottom: 5px;">
			<view v-for="(item, index) in listItems" :key="index" @click="handleClick(item)">
				<gui-image :src="item.icon" borderRadius="10rpx" class="gui-bg-white" :width="96" :height="96"></gui-image>
				<view class="fz12 mt5">{{item.title}}</view>
			</view>
		</view>
		<view class="demo-space"></view>
	</view>
</template>

<script>
	import graceJS from "@/Grace6/js/grace.js";
	export default {
		data() {
			return {
				isLoad:false,
				listItems:[
					{
						id:1,
						page:2,
						icon:"/static/list/book.png",
						url:"/pages/category/course",
						title:"精品课程"
					},
					{
						id:2,
						page:1,
						icon:"/static/list/deng.png",
						url:"/pages/category/note",
						title:"实战小册"
					},
					{
						id:3,
						page:2,
						icon:"/static/list/cp.png",
						url:"/pages/category/downloads",
						title:"资源下载"
					},
					{
						id:4,
						page:1,
						icon:"/static/list/ted.png",
						url:"/pages/category/downloads",
						title:"下载规则"
					},
					{
						id:5,
						page:2,
						icon:"/static/list/xueba.png",
						url:"/pages/category/rule",
						title:"推广规则"
					}
				]
			};
		},
		created() {
			setTimeout(()=>{
				this.isLoad = true
			},1000)
		},
		methods:{
			handleClick(item){
				graceJS.navigate(`${item.url}?id=${item.id}&title=${item.title}&page=${item.page}`, 'navigateTo');
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
